<template>
  <div class>
    <div class="rank-list">
      <div class="rank">
        <!-- 榜单列表 -->
        <div class="rank-left rklr">
          <!-- 音乐特色版 -->
          <h2 class="f-ff1">云音乐特色版</h2>
          <ul>
            <li
              v-for="(item,index) in aTopList"
              :key="index"
              class="rankleftlis"
              @mouseenter="bgColor(index)"
              @mouseleave="bgColor1(index)"
            >
              <div class="itembf">
                <div class="itemleft">
                  <a href="/find/rankinglist">
                    <img :src="item.coverImgUrl" :alt="item.name" />
                  </a>
                </div>
                <p>
                  <a href>{{item.name}}</a>
                </p>
                <p class="evydup">每日更新</p>
              </div>
            </li>
          </ul>

          <!-- 全球媒体榜 -->
          <h2 class="f-ff2 f-ff1">全球媒体榜</h2>
          <ul class="qunqiu">
            <li
              v-for="(item,index) in aBotList"
              :key="index"
              class="rankleftlis"
              @mouseenter="bgColor(index+4)"
              @mouseleave="bgColor1(index+4)"
            >
              <div class="itembf">
                <div class="itemleft">
                  <a href="/find/rankinglist">
                    <img :src="item.coverImgUrl" :alt="item.name" />
                  </a>
                </div>
                <p>
                  <a href>{{item.name}}</a>
                </p>
                <p class="evydup">{{item.updateFrequency}}</p>
              </div>
            </li>
          </ul>
        </div>

        <!-- 榜单详情 -->
        <div class="rank-right rklr">
          <div class="g-wrap">
            <div class="cnt">
              <div class="cnt-left">
                <img :src="aTopList[0].coverImgUrl" alt />
              </div>
              <div class="cnt-right">
                <div class="cntc">
                  <h2 class="fff2">云音乐飙升榜</h2>
                </div>
                <div class="user f-cb">
                  <img src="./images/time.png" alt />
                  <span class="sep s-fc3">最近更新：08月10日</span>
                  <span class="s-fc4">（每天更新）</span>
                </div>

                <!-- 播放 收藏 转发 下载 评论 -->
                <div class="btns f-cb">
                  <ul>
                    <li class="sc">
                      <a href>
                        <img src="./images/py.png" alt />
                      </a>
                      <a class="addpy" href>
                        <img src="./images/addpy.png" alt />
                      </a>
                    </li>
                    <li class="scc">
                      <a href>
                        <img src="./images/sc.png" alt />
                        <span>(3259731)</span>
                      </a>
                    </li>
                    <li class="zhuanfa">
                      <a href>
                        <img src="./images/zhuanfa.png" alt />
                        <span>(8909)</span>
                      </a>
                    </li>
                    <li class="download">
                      <a href>
                        <img src="./images/download.png" alt />
                        <span>下载</span>
                      </a>
                    </li>
                    <li class="pinglun">
                      <a href>
                        <img src="./images/pinglun.png" alt />
                        <span>(197781))</span>
                      </a>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </div>

          <!-- 歌曲列表 -->
          <div class="g-wrap12">
            <div class="wrapcenter">
              <div class="u-title u-title-1 f-cb">
                <h3>
                  <span class="f-ff2">歌曲列表</span>
                </h3>
                <span class="sub s-fc3">
                  <span>100</span>首歌
                </span>
                <div class="more s-fc3">
                  播放：
                  <strong class="s-fc6" id="play-count">3420869888</strong>次
                </div>
              </div>
              <div class="tablist">
                <table class="m-table m-table-rank">
                  <thead>
                    <tr>
                      <th class="first w1"></th>
                      <th class="second">
                        <div class="wp">标题</div>
                      </th>
                      <th class="w2-1">
                        <div class="wp">时长</div>
                      </th>
                      <th class="w3-1">
                        <div class="wp">歌手</div>
                      </th>
                    </tr>
                  </thead>

                  <!-- 歌曲表单 -->
                  <tbody class="tab">
                    <tr v-for="(item,index) in topListSong" :key="index">
                      <td class="rowfirsttd">
                        <span>{{index+1}}</span>
                        <span class="rosspn">
                          <img src="./images/new.png" alt />
                        </span>
                      </td>
                      <td class="rowsecondtd">
                        <img :src="item.imgUrl.url" alt />
                        <div class="secondcer">
                          <img class="tabplay" src="./images/play.png" alt />
                          <a href>{{item.first}}</a>
                        </div>
                      </td>

                      <td
                        class="thirdtd"
                        ref="thirdtds"
                        @mouseenter="enter(index)"
                        @mouseleave="leave(index)"
                      >
                        <span class="songtime">{{item.songTime}}</span>
                        <div class="ascd">
                          <ul>
                            <li>
                              <img src="./images/add.png" alt="添加到播放列表" title="添加到播放列表" />
                            </li>
                            <li>
                              <img src="./images/sc.png" alt="收藏" title="收藏" />
                            </li>
                            <li>
                              <img
                                style="margin-top: 1px;"
                                src="./images/zhuanfa.png"
                                alt="分享"
                                title="分享"
                              />
                            </li>
                            <li>
                              <img src="./images/download.png" alt="下载" title="下载" />
                            </li>
                          </ul>
                        </div>
                      </td>

                      <td>
                        <span class="text">{{item.second}}</span>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>

              <!-- 评论区 -->
              <div class="u-title u-title-1 f-cb">
                <h3>
                  <span class="f-ff2">评论</span>
                </h3>
                <span class="sub s-fc3">
                  共
                  <span>191170</span>评论
                </span>
              </div>

              <!-- 发表评论 -->
              <div class="iptarea">
                <div class="head">
                  <Rank></Rank>
                </div>
              </div>

              <!-- 精彩评论 -->
              <div class="cmmts j-flag">
                <h3 class="u-hd4">精彩评论</h3>
                <div class="itm" v-for="(item,index) in commentsList" :key="index">
                  <div class="head">
                    <a href>
                      <img :src="item.user.avatarUrl" />
                    </a>
                  </div>
                  <div class="cntwrap cntt">
                    <div class>
                      <div class="f-brk">
                        <a href class="s-fc7">{{item.user.nickname}}</a>
                        ：{{item.content}}
                      </div>
                    </div>
                    <div class="rp">
                      <div class="time s-fc4">{{item.time}}</div>
                      <a href="javascript:void(0)">
                        <i class="zan u-icn2 u-icn2-12"></i>
                        ({{parseInt(item.commentId/1000000)}})
                      </a>
                      <span class="sep">|</span>
                      <a href="javascript:void(0)" class="s-fc3">回复</a>
                    </div>
                  </div>
                </div>
              </div>

              <!-- 翻页按钮 -->
              <div class="fanye" id="fanye">
                <a><上一页</a>
                <a>1</a>
                <a @click="clickBut2(2)">2</a>
                <a @click="clickBut3(3)">3</a>
                <a>4</a>
                <a>5</a>
                <a>6</a>
                <a>7</a>
                <a>8</a>
                <span>...</span>
                <a>9559</a>
                <a>下一页></a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    
  </div>
</template>
<script>
import Rank from "../../../components/RankList"
export default {
  data: () => ({
    aTopList: [], //云音乐榜单上
    aBotList: [], //云音乐榜单下
    topListSong: [], //歌手列表前三条
    commentsList: [],
    conmmentsList1: [],
    arrSpan: document.getElementsByClassName("songtime"),
    arrAscd: document.getElementsByClassName("ascd"),
    rankLeftLis: document.getElementsByClassName("rankleftlis"),
    // btnAs: document.querySelectorAll(".fanye a"),
    imgUrl: [
      {
        id: 0,
        url:
          "http://p4.music.126.net/wcMr7kNgiasF1TljEqqRhQ==/109951165219432045.jpg?param=50y50&quality=100",
      },
      {
        id: 1,
        url:
          "http://p3.music.126.net/5Dc4JMRNzyteRVsEGGZYiA==/109951165071456067.jpg?param=50y50&quality=100",
      },
      {
        id: 2,
        url:
          "http://p4.music.126.net/Z4tngqEcC2SiW16CvmPlkg==/109951165013302726.jpg?param=50y50&quality=100",
      },
    ],
    songTime: ["05:04", "04:03", "03:05"],
  }),
  created() {
    this.getMusicLists();
    this.getTopList();
    this.getCommentsList();
    // this.getCommentsListBtn2();
    this.getPersonList();
  },
  methods: {
    async getMusicLists() {
      const { data } = await this.Api.dlxApi.getMusicList();
      this.aTopList = data.list.slice(0, 4);
      this.aBotList = data.list.slice(4);
      console.log(data);
    },
    async getTopList() {
      // 前三条歌曲列表 name
      const { data } = await this.Api.dlxApi.getTopList();
      const data1 = data.list[0].tracks;
      for (var i = 0; i < data1.length; i++) {
        data1[i].imgUrl = this.imgUrl[i];
        data1[i].songTime = this.songTime[i];
      }
      this.topListSong = data1;
      console.log(this.topListSong);
    },
    // 评论
    async getCommentsList() {
      const {
        data: { comments },
      } = await this.Api.dlxApi.getCommentsList();
      // console.log(comments);
      this.commentsList = comments.slice(60, 81);
      this.conmmentsList1 = comments.slice(40, 61); //第二页
    },

    enter(index) {
      this.arrSpan[index].style.display = "none";
      this.arrAscd[index].style.display = "block";
    },

    leave(index) {
      this.arrSpan[index].style.display = "block";
      this.arrAscd[index].style.display = "none";
    },
    // /personalized 歌曲?
    async getPersonList() {
      const data = await this.Api.dlxApi.getPersonList();
      // console.log(data);
    },
    bgColor(index) {
      this.rankLeftLis[index].style.backgroundColor = "rgb(239, 239, 239)";
    },
    bgColor1(index) {
      this.rankLeftLis[index].style.backgroundColor = "white";
      this.rankLeftLis[0].style.backgroundColor = "#e6e6e6";
    },
    clickBut2() {
      this.commentsList = this.conmmentsList1;
    },
    // clickButA() {
    //   console.log(this.btnAs)
    //   for (var i = 0; i < 10; i++) {
    //     btns[i].οnclick = (function (i) {
    //       return function () {
    //         alert(i);
    //       };
    //     })(i);
    //   }
    // },
  },
  components:{
    Rank,
  }
};
</script>
<style lang="less" scoped>
* {
  padding: 0;
  margin: 0;
}
ul,
li {
  list-style: none;
}
.rank-list {
  width: 100%;
  height: 100%;
}
.rank {
  width: 990px;
  margin: 0 auto;
  height: 3000px;
  // background-color: rgb(213, 238, 230);
  position: relative;
  // padding-top: 40px;
}
.rklr {
  font-size: 12px;
  color: #333;
  font-family: Arial, Helvetica, sans-serif;
}
.rank-left {
  width: 246px;
  float: left;
  border: 1px solid rgb(179, 176, 176);
  border-top: none;
  height: 100%;
  border-bottom: none;
}
.rank-left ul li {
  cursor: pointer;
  vertical-align: middle;
}
.rank-left ul li:nth-child(1) {
  background: #e6e6e6;
}
.rank-right {
  // width: 740px;
  float: left;
}
.f-ff1 {
  padding: 0 10px 12px 15px;
  font-size: 15px;
  color: #000;
  font-family: simsun, \5b8b\4f53;
  margin-top: 46px;
  margin-left: 4px;
}
.itemleft {
  display: inline-block;
  position: relative;
}
.itemleft img {
  width: 40px;
  height: 40px;
}
.itembf {
  position: relative;
  left: 20px;
  height: 62px;
  overflow: hidden;
}
.itembf p {
  position: relative;
  right: 0;
  left: 56px;
  top: -54px;
}
.itembf a {
  display: inline-block;
  margin-top: 10px;
  // color: #000;
  text-decoration: none;
}
.itembf .evydup {
  color: #999;
  left: 56px;
  top: -44px;
}
.f-ff2 {
  margin-top: 10px;
}
.f-ff2 .itembf .rank-left ul li:nth-child(1) {
  background: none;
}
.g-wrap {
  width: 740px;
  height: 240px;
  // background: palegoldenrod;
  position: relative;
}
.cnt {
  width: 660px;
  height: 156px;
  // background: palegreen;
  position: absolute;
  left: 42px;
  top: 42px;
}
.cnt-left {
  border: 1px solid rgb(209, 203, 203);
  width: 152px;
  height: 152px;
  padding: 2px 1px 1px 2px;
}
.cnt-left img {
  width: 150px;
  height: 150px;
}
.cnt-right {
  position: absolute;
  left: 190px;
  top: 25px;
}
.fff2 {
  line-height: 24px;
  font-size: 20px;
  font-weight: normal;
}
.user {
  margin: 0 0 20px;
  line-height: 40px;
}
.u-icn {
  margin: 0 0 20px;
  line-height: 35px;
}
.sep {
  margin-left: 5px;
}
.s-fc3,
a.s-fc3:hover {
  color: #666;
}
.user img {
  display: block;
  float: left;
  margin-top: 10px;
}
.s-fc4 {
  color: #999;
}
.u-title-1 {
  height: 33px;
}
.u-title {
  height: 40px;
  border-bottom: 2px solid #c20c0c;
}
.u-title-1 h3 {
  font-size: 20px;
  line-height: 28px;
}
.u-title h3 {
  float: left;
  font-size: 24px;
  font-weight: normal;
}
.u-title-1 .sub {
  margin: 9px 0 0 20px;
}
.u-title .sub {
  float: left;
  margin: 13px 0 0 10px;
}
.s-fc3,
a.s-fc3:hover {
  color: #666;
}
.u-title-1 .more {
  margin-top: 5px;
}
.u-title .more {
  float: right;
  margin-top: 14px;
}
.s-fc3,
a.s-fc3:hover {
  color: #666;
}
.f-cb:after {
  clear: both;
  content: ".";
  display: block;
  height: 0;
  visibility: hidden;
}
.f-ff2 {
  font-family: "Microsoft Yahei", Arial, Helvetica, sans-serif;
}
.s-fc6,
a.s-fc6:hover {
  color: #c20c0c;
}
.m-table-rank .first {
  width: 77px;
}
.m-table th {
  height: 38px;
  background-color: #f7f7f7;
  background-position: 0 0;
  background-repeat: repeat-x;
}
.m-table th {
  vertical-align: top;
  text-align: left;
  font-weight: normal;
  color: #666;
  border-bottom: 1px solid rgb(194, 190, 190);
  border-right: 1px solid rgb(194, 190, 190);
  border-left: 1px solid rgb(194, 190, 190);
}
table {
  border-collapse: collapse;
  border-spacing: 0;
  table-layout: fixed;
}
.m-table th .wp {
  height: 18px;
  line-height: 18px;
  padding: 8px 10px;
  background-position: 0 -56px;
}
.m-table .w2-1 {
  width: 114px;
}
.m-table .second {
  width: 47%;
}
.m-table .w3-1 {
  width: 24%;
}
.wrapcenter {
  width: 660px;
  margin: 0 auto;
  overflow: hidden;
}

// 精彩评论
.u-hd4 {
  position: relative;
  top: 1px;
  height: 20px;
  border-bottom: 1px solid #cfcfcf;
}
.cmmts .itm {
  padding: 15px 0;
  border-top: 1px dotted #ccc;
}
.head,
.head img {
  float: left;
  width: 50px;
  /* height: 50px; */
  margin-right: -100px;
}
a {
  text-decoration: none;
  color: #333;
}
a,
a *,
.f-hand,
.f-hand * {
  cursor: pointer;
}
.cmmts img {
  vertical-align: middle;
}
.head img {
  float: left;
  width: 50px;
  /* height: 50px; */
  margin-right: -100px;
}
.cmmts .cntwrap {
  margin-left: 60px;
}
.cmmts .f-brk {
  word-break: break-word;
}
.cmmts .cntt {
  width: 91%;
  overflow: hidden;
  line-height: 20px;
}
.f-brk {
  word-wrap: break-word;
  word-break: break-word;
  white-space: normal;
}
.cmmts .cntwrap .s-fc7 {
  margin-right: 5px;
}
.s-fc7,
a.s-fc7:hover {
  color: #0c73c2;
}
.cmmts div.rp {
  margin-top: 15px;
  text-align: right;
}
.cmmts .time {
  float: left;
  margin: 0 !important;
}
.s-fc4,
a.s-fc4:hover {
  color: #999;
}
.cmmts .cntwrap .u-icn2 {
  margin-right: 5px;
  vertical-align: -2px;
}
.cmmts .zan {
  margin-top: -4px;
}
.u-icn2-12,
.u-icn2-13 {
  width: 15px;
  height: 14px;
  background-position: -150px 0;
}
.u-icn,
.u-icn2,
.u-icn3 {
  display: inline-block;
  overflow: hidden;
  vertical-align: middle;
}
.u-icn2 {
  background: url(./images/zan.png) no-repeat 0 9999px;
}
.cmmts .sep {
  margin: 0 8px;
  color: #ccc;
}

// footer
.footer {
  width: 100%;
  height: 172px;
  overflow: hidden;
  border-top: 1px solid #d3d3d3;
  background: #f2f2f2;
}
.footcenter {
  width: 990px;
  position: relative;
  height: 172px;
  margin: 0 auto;
  font-size: 12px;
}
.m-ft .copy {
  float: left;
  width: 520px;
  padding-top: 15px;
  line-height: 24px;
}
.s-fc3,
a.s-fc3:hover {
  color: #666;
}
.s-fc4,
a.s-fc4:hover {
  color: #999;
}
.m-ft .copy .line {
  margin: 0 8px 0 10px;
  color: #c2c2c2;
}
.m-ft .copy .sep {
  margin-right: 14px;
}
.s-fc3,
a.s-fc3:hover {
  color: #666;
}
.m-ft .copy .sep {
  margin-right: 14px;
}
.m-ft .copy .police-link {
  margin-left: 5px;
  font-size: 0;
}
.m-ft .copy .police-logo {
  width: 14px;
  height: 14px;
  background: url(images/tes.png) no-repeat;
  background-size: cover;
  display: inline-block;
  margin-right: 2px;
  vertical-align: -2px;
}
.m-ft .copy .police-text {
  font-size: 12px;
}
.rightbot img {
  margin-top: 30px;
  margin-left: 35px;
}
.rank-left .qunqiu li:nth-child(1) {
  background: none;
}

// 翻页按钮
.fanye {
  text-align: center;
  margin-top: 10px;
  font-size: 12px;
}
.fanye a {
  display: inline-block;
  margin: 2px;
  width: 25px;
  height: 24px;
  line-height: 24px;
  border: 1px solid rgb(206, 204, 204);
  // border-radius: 2px;

  // opacity: 0.7;
}
.fanye a:hover{
  border: 1px solid rgb(155, 153, 153);
}
.fanye a:nth-child(1) {
  width: 60px;
  background-color: #eceaea;
}
.fanye a:nth-child(12) {
  width: 60px;
  background-color: #eceaea;
}

.fanye a:nth-child(11) {
  width: 40px;
}
.fanye a:nth-child(2) {
  background-color: #a2161b;
}

// tabody <!-- 歌曲表单 -->
.tab tr td {
  padding-left: 8px;
  height: 70px;
}
.tabplay {
  width: 17px;
  height: 17px;
}
.rowsecondtd {
  position: relative;
}
.secondcer {
  position: absolute;
  top: 23px;
  left: 70px;
}
.secondcer a {
  display: block;
  position: relative;
  top: -19px;
  left: 29px;
}
.tab tr td.rowfirsttd span:nth-child(1) {
  margin-right: 20px;
}
.tab tr td.rowfirsttd span.rosspn {
  display: block;
  float: right;
  margin-right: 11px;
}
.text {
  display: block;
  width: 100%;
  position: relative;
  zoom: 1;
  overflow: hidden;
  height: 18px;
}
tbody {
  border: 1px solid rgb(219, 219, 219);
}
.ascd ul li {
  margin: 0;
  padding: 0;
  float: left;
  margin-right: 1px;
}
.ascd {
  overflow: hidden;
  position: relative;
  width: 96px;
  margin-left: -4px;
  display: none;
}
.ascd ul li img {
  height: 19px;
}
.rank-left ul li:hover {
  cursor: pointer;
  vertical-align: middle;
}
a:hover {
  // color: #ba2636;
  text-decoration: underline;
}
a:visited {
  text-decoration: none;
}
#fanye a,
#fanye a:hover {
  text-decoration: none;
}
.btns ul li {
  float: left;
  position: relative;
  width: 84px;
  height: 25px;
  border: 1px solid gray;
  line-height: 25px;
  border-radius: 3px;
}
// 转发 收藏 评论
.sc a {
  display: block;
  position: absolute;
}
.btns ul li.sc {
  border: none;
}
.addpy {
  left: 60px;
}
.btns ul li img { 
  left: 4px;
  top: 2px;
}
.btns ul li img,
.btns ul li span {
  position: absolute;
}
.btns ul li span {
  left: 25px;
}
.btns ul li.scc {
  left: 13px;
  top: 3px;
}
.btns ul li.zhuanfa {
  top: 3px;
  left: 18px;
  width: 64px;
}
.btns ul li.download {
  top: 3px;
  left: 23px;
  width: 58px;
}
.btns ul li.pinglun {
  top: 3px;
  left: 28px;
  width: 80px;
}
</style>
